<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { get } from "@/request/request";
import { ref, computed } from "vue";
import TnTitle from "@tuniao/tnui-vue3-uniapp/components/title/src/title.vue";

const searcForm = ref({
  longitude: "",
  latitude: "",
});
const currentPosition = ref({
  currentName: "获取定位",
  currentId: 0,
});

const scrollIntoViewId = ref("");
const leftListAZ = computed(() => {
  const az = ["#"];
  for (let i = 65; i <= 90; i++) {
    az.push(String.fromCharCode(i));
  }
  return az;
});

const hotCityList = ref([]);
const cityList = ref([]);

onLoad(() => {
  position();
  positionList();
});

const position = () => {
  uni.getLocation({
    type: "gcj02",
    success: function (res) {
      console.log(
        "当前位置的经度：" + res.longitude,
        "当前位置的纬度：" + res.latitude
      );
      searcForm.value.longitude = res.longitude;
      searcForm.value.latitude = res.latitude;
      getPosition();
    },
  });
};
//定位信息
const getPosition = () => {
  get("/public_api/cur_region", searcForm.value).then((res) => {
    console.log("返回的经纬度", res);
    currentPosition.value.currentName = res.data ? res.data.name : "获取定位";
    currentPosition.value.currentId = res.data ? res.data.id : 0;
    uni.setStorageSync("current_position", currentPosition.value);

    // 定位成功后返回上一页
    if (res.data) {
      uni.navigateBack({
        delta: 1
      });
    }
  });
};
//选择城市
const selectCity = (city) => {
  console.log(city);
  currentPosition.value.currentName = city.name;
  currentPosition.value.currentId = city.id;
  uni.setStorageSync("current_position", currentPosition.value);

  // 选择城市后立即返回上一页
  uni.navigateBack();
};

//定位列表
const positionList = () => {
  get("/public_api/t_area").then((res) => {
    console.log(res);
    const data = res.data;
    // 处理热门城市列表
    hotCityList.value = data.filter(city => city.isHot);
    // 处理城市列表
    const cityMap = {};
    data.forEach(city => {
      if (!cityMap[city.initial]) {
        cityMap[city.initial] = {
          initial: city.initial,
          children: []
        };
      }
      cityMap[city.initial].children.push(city);

      // 展开并添加children中的城市
      if (city.children && city.children.length > 0) {
        city.children.forEach(child => {
          if (!cityMap[child.initial]) {
            cityMap[child.initial] = {
              initial: child.initial,
              children: []
            };
          }
          cityMap[child.initial].children.push(child);
        });
      }
    });

    cityList.value = Object.values(cityMap);
  });
};
const scrollTo = (value) => {
  scrollIntoViewId.value = value;
};
</script>

<template>
  <view class="app">
    <view class="top">
      <view class="city_name" @click="position">
        <image src="/static/home/address.svg" />
        <view>{{ currentPosition.currentName }}</view>
      </view>
      <view class="city_btn" @click="position">重新定位</view>
    </view>

    <scroll-view scroll-y="true" :scroll-into-view="scrollIntoViewId" style="height: 100%">
      <view id="#">
        <view class="title">
          <TnTitle title="热门城市" />
        </view>
        <view>
          <view class="hot-city">
            <view class="hot-city-item" v-for="(item, index) in hotCityList" :key="index" @click="selectCity(item)">
              {{ item.name }}
            </view>
          </view>
        </view>
      </view>
      <view class="city-list">
        <template v-for="city in cityList">
          <view :id="city.initial">
            <view class="title">{{ city.initial }}</view>
            <view class="city-list-item">
              <view class="city-list-item-name" v-for="(item, index) in city.children" :key="index"
                @click="selectCity(item)">
                {{ item.name }}
              </view>
            </view>
          </view>
        </template>
      </view>
      <view class="Index">
        <view v-for="(letter, index) in leftListAZ" :key="index" @click="scrollTo(letter)">
          {{ letter }}
        </view>
      </view>
    </scroll-view>
    <view></view>
  </view>
</template>

<style scoped lang="scss">
.app {
  padding-bottom: env(safe-area-inset-bottom);

  .top {
    height: 112rpx;
    width: 100%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;

    .city_name {
      display: flex;
      align-items: center;
      font-size: 32rpx;

      image {
        width: 48rpx;
        height: 48rpx;
      }
    }

    .city_btn {
      width: 144rpx;
      height: 56rpx;
      background: #e7e7e7;
      border-radius: 9999rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      font-weight: 600;
    }
  }

  .title {
    padding: 15rpx;
  }

  .Index {
    width: 30rpx;
    position: fixed;
    right: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10rpx;
    top: 160rpx;
  }

  .hot-city,
  .city-list-item {
    width: 100%;
    background: #ffffff;

    .city-list-item-name {
      padding: 20rpx;
      border-bottom: 1px solid #f5f5f5;
    }

    &-item:last-child {
      border-bottom: none;
    }
  }
}
</style>
